<template>
	<view class="hot-tag">
		<scroll-view :scroll-x="true" style="white-space: nowrap;">
			<view class="dataInfo">
				<view class="dataList" v-for="item in tagList.list" :key="item.id">
					<view class="list">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	const tagList = reactive({
		list: [{
				id: '1',
				name: '酒店新人特惠'
			},
			{
				id: '2',
				name: '步行旅行团'
			},
			{
				id: '3',
				name: '古北水镇两日游'
			},
			{
				id: '4',
				name: '北京古北水镇'
			},
			{
				id: '5',
				name: '漂流一日游'
			}
		]
	})
</script>

<style lang="scss">
	.hot-tag {
		.hand {
			width: 95%;
			margin: 0 auto;
		}

		.dataInfo {
			width: 100%;
			display: flex;
		}

		.dataList {
			margin: 10rpx;
		}

		.dataList:first-child {
			margin-left: 0;
		}

		.list {
			display: inline-block;
			padding: 4upx 16upx;
			background: rgba(23, 174, 240, 0.2);
			color: #333333;
			border-radius:50px;
			font-size: 24upx;
		}
	}
</style>
